<template>
  <div class="user-info-container">
    <!-- 头部背景 -->
    <div class="header-background"></div>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <!-- 头像区域 -->
      <div class="avatar-section">
        <div class="avatar-wrapper">
          <img
            :src="userInfo?.avatar || '/default-avatar.png'"
            alt="用户头像"
            class="user-avatar"
          />
        </div>
      </div>

      <!-- 用户基本信息 -->
      <div class="user-basic-info">
        <h2 class="username">{{ userInfo?.nickname || userInfo?.username || "游客" }}</h2>
        <p v-if="userInfo?.introduction" class="user-intro">{{ userInfo.introduction }}</p>
        <p v-else class="user-intro">这个人很懒，还没有填写个人简介~</p>
      </div>

      <!-- 用户详细信息 -->
      <div class="user-details">
        <div class="detail-grid">
          <!-- 性别 -->
          <div class="detail-item">
            <div class="detail-label">
              <SvgIcon :name="userInfo?.gender === 1 ? 'boy' : userInfo?.gender === 2 ? 'girl' : 'user'" />
              <span>性别</span>
            </div>
            <div class="detail-value">{{ getGenderText(userInfo?.gender) }}</div>
          </div>

          <!-- 邮箱 -->
          <div v-if="userInfo?.email" class="detail-item">
            <div class="detail-label">
              <SvgIcon name="youxiang" />
              <span>邮箱</span>
            </div>
            <div class="detail-value">{{ userInfo.email }}</div>
          </div>

          <!-- 手机 -->
          <div v-if="userInfo?.phone" class="detail-item">
            <div class="detail-label">
              <SvgIcon name="dianhua" />
              <span>手机</span>
            </div>
            <div class="detail-value">{{ userInfo.phone }}</div>
          </div>

        </div>
      </div>

      <!-- 社交链接 -->
      <div v-if="hasSocialLinks" class="social-links">
        <h3 class="section-title">社交主页</h3>
        <div class="social-grid">
          <a
            v-if="userInfo?.github"
            :href="userInfo.github"
            target="_blank"
            class="social-link github"
          >
            <SvgIcon name="github" />
            <span>GitHub</span>
          </a>

          <a
            v-if="userInfo?.gitee"
            :href="userInfo.gitee"
            target="_blank"
            class="social-link gitee"
          >
            <SvgIcon name="gitee" />
            <span>Gitee</span>
          </a>

          <a
            v-if="userInfo?.csdn"
            :href="userInfo.csdn"
            target="_blank"
            class="social-link csdn"
          >
            <SvgIcon name="csdn" />
            <span>CSDN</span>
          </a>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="user-stats">
        <h3 class="section-title">数据统计</h3>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
              <SvgIcon name="article" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics?.articleCount || 0 }}</div>
              <div class="stat-label">发布文章</div>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
              <SvgIcon name="view" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics?.viewCount || 0 }}</div>
              <div class="stat-label">文章浏览</div>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
              <SvgIcon name="like" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics?.likeCount || 0 }}</div>
              <div class="stat-label">获赞数量</div>
            </div>
          </div>

          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
              <SvgIcon name="collect" />
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics?.collectCount || 0 }}</div>
              <div class="stat-label">被收藏数</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回按钮 -->
      <div class="action-buttons">
        <el-button size="large" @click="goBack" :icon="ArrowLeft">
          返回
        </el-button>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useRouter } from "vue-router"
import { useWebInfoStore } from "@/store/modules/webInfo"
import { ArrowLeft } from "@element-plus/icons-vue"

const router = useRouter()
const webInfoStore = useWebInfoStore()

// 直接使用 store 中的作者信息
const userInfo = computed(() => webInfoStore.authorInfo)

// 模拟统计数据（实际应从后端获取）
const statistics = computed(() => ({
  articleCount: 42,
  viewCount: 8888,
  likeCount: 666,
  collectCount: 233
}))

// 计算属性：是否有社交链接
const hasSocialLinks = computed(() => {
  return userInfo.value?.github || userInfo.value?.gitee || userInfo.value?.csdn
})

// 获取性别文本
const getGenderText = (gender: number | undefined) => {
  if (gender === undefined || gender === null) return "未知"
  switch (gender) {
    case 1:
      return "男"
    case 2:
      return "女"
    default:
      return "未知"
  }
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return "未知"
  const date = new Date(dateStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
    date.getDate()
  ).padStart(2, "0")}`
}

// 返回上一页
const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.user-info-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 40px;
  position: relative;
}

// 头部背景
.header-background {
  height: 200px;
  background: var(--gradient-primary);
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
  }
}

// 用户卡片
.user-card {
  max-width: 900px;
  margin: -100px auto 0;
  background: white;
  border-radius: 20px;
  padding: 0 40px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;

  @media (max-width: 768px) {
    margin: -80px 20px 0;
    padding: 0 20px 30px;
    border-radius: 16px;
  }
}

// 头像区域
.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: white;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  margin-top: -75px;

  @media (max-width: 768px) {
    width: 120px;
    height: 120px;
    margin-top: -60px;
  }
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

// 用户基本信息
.user-basic-info {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.username {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-id {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}

.user-intro {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

// 用户详细信息
.user-details {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s;

  &:hover {
    background: #f0f2f5;
    transform: translateY(-2px);
  }
}

.detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
  font-weight: 500;

  :deep(svg) {
    width: 18px;
    height: 18px;
    color: #667eea;
  }
}

.detail-value {
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

// 章节标题
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid #667eea;
}

// 社交链接
.social-links {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s;
  font-weight: 500;
  color: white;

  :deep(svg) {
    width: 24px;
    height: 24px;
  }

  &.github {
    background: linear-gradient(135deg, #24292e 0%, #000000 100%);

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(36, 41, 46, 0.3);
    }
  }

  &.gitee {
    background: linear-gradient(135deg, #c8232c 0%, #d83238 100%);

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(200, 35, 44, 0.4);
    }
  }

  &.csdn {
    background: linear-gradient(135deg, #fc5531 0%, #d94715 100%);

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(252, 85, 49, 0.3);
    }
  }
}

// 统计信息
.user-stats {
  margin-bottom: 30px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  :deep(svg) {
    width: 28px;
    height: 28px;
    color: white;
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: #999;
}

// 返回按钮
.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .el-button {
    min-width: 140px;
    height: 45px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  @media (max-width: 768px) {
    .el-button {
      width: 100%;
      max-width: 300px;
    }
  }
}
</style>